<script setup>
import {ref,onMounted} from 'vue'
import {queryAllClazzApi} from '@/api/clazz'
import {queryStuApi,addStuApi} from '@/api/stu'

//定义基础数据
//学历列表数据
const degrees = ref([{ name: '初中', value: 1 },{ name: '高中', value: 2 },{ name: '大专', value: 3 },{ name: '本科', value: 4 },{ name: '硕士', value: 5 },{ name: '博士', value: 6 }])
//班级列表数据
const clazzs = ref([]);
//性别列表数据
const genders = ref([{ name: '男', value: 1 },{ name: '女', value: 2 }])


//调用班级的信息得到全部的班级
async function getAllClazz() {
  const result=await queryAllClazzApi()
  if(result.code){
    clazzs.value=result.data
  }
}
//钩子函数
onMounted(()=>{
  getAllClazz()
  serach()
})
//查询搜索的数据
const searchStu=ref({
                  name:'',
                  degree:'',
                  clazzId:''
})
//查询传输来的数据
async function serach(){
  const result=await queryStuApi(searchStu.value.name,
                               searchStu.value.degree,
                               searchStu.value.clazzId,
                               currentPage.value,
                               pageSize.value
  )
  if(result.code){
    total.value=result.data.total
    stuList.value=result.data.rows
  }
}
//清空
function claer(){
  searchStu.value={
                  name:'',
                  degree:'',
                  clazzId:''
}
serach()
}
//新增学员
function add(){
  dialogVisible.value=true
  dialogTitle.value='添加学员'
}
//批量删除
function deleteByIds(){

}
//表格里的数据
const stuList=ref([])

//违纪
function violation(){

}
//当前页码
const currentPage=ref(1)
//每页的数量
const pageSize=ref(10)
//数量总数
const total=ref(0)
//控制当页展示的数据条数
function handleSizeChange(){
  serach()
}
//控制页码的改变
function handleCurrentChange(){
  serach()
}

//添加和编辑学员弹框信息
const student=ref({
                   name:'',
                   no:'',
                   gender:'',
                  phone:'',
                  idCard:'',
                  isCollege:'',
                  address:'',
                  degree:'',
                  graduationDate:'',
                  clazzId:''
})
//弹窗的状态，是打开还是关闭
const dialogVisible=ref(false)
//弹窗的名字
const dialogTitle=ref('')
//校验用的
const StuFormRef=ref()

//表单校验规则
const rules = ref({
  name: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 2, max: 10, message: '用户名长度应在2到20个字符之间', trigger: 'blur' }
  ],
  no: [
    { required: true, message: '请输入学号', trigger: 'blur' },
    { item:10, message: '学号长度固定10位', trigger: 'blur' }
  ],
  gender: [
    { required: true, message: '请选择性别', trigger: 'change' }
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    //^代表以这个数字开头，$代表结尾，[]代表限制数字的范围，以\d代表这个位置仅能是数字，\d{}代表有多少位是数字
    { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号', trigger: 'blur' }
  ],
  isCollege: [
    { required: true, message: '请选择', trigger: 'change' }
  ],
  address: [
    { min: 0, max: 100, message: '联系地址长度最大100个字符', trigger: 'blur' }
  ]
})
//保存
function save(){

}
</script>

<template>
  <h1>学员管理</h1>
  <!-- 表头的表单项和按钮 -->
  <div class="search">
    <el-form :inline="true" :model="searchStu" class="demo-form-inline">
    <el-form-item label="姓名">
      <el-input v-model="searchStu.name" placeholder="请输入学员姓名" />
    </el-form-item>

    <el-form-item label="最高学历">
      <el-select
        v-model="searchStu.degree"
        placeholder="请选择">
        <el-option v-for="degree in degrees" :label="degree.name" :value="degree.value"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="所属班级">
      <el-select
        v-model="searchStu.clazzId"
        placeholder="请选择">
        <el-option v-for="clazz in clazzs" :label="clazz.name" :value="clazz.id"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="serach">查询</el-button>
      <el-button type="info" @click="claer">清空</el-button>
    </el-form-item>
  </el-form>
  </div>
  <div class="table">
    <el-button type="primary" @click="add"> + 新增学员</el-button>
    <el-button type="danger" @click="deleteByIds"> - 批量删除</el-button>
  </div>

    <!-- 表格 -->
<el-table :data="stuList" border style="width: 100%" >
    <!-- type="index"让表格序号列顺序排列1234 -->
     <!-- 用align使数据居中 -->
    <el-table-column type="selection" width="50"  align="center"/>
    <el-table-column prop="name" label="姓名" width="80"  align="center"/>
    <el-table-column prop="no" label="学号" width="120"  align="center"/>
    <el-table-column prop="clazzName" label="班级" width="120"  align="center"/>
    <el-table-column prop="gender" label="性别" width="80"  align="center">
      <!-- 插槽 -->
      <template #default="scope">
        {{scope.row.gender==1?'男':'女'}}
      </template>
    </el-table-column>
    <el-table-column prop="phone" label="手机号" align="center" width="120"/>
    <el-table-column prop="degree" label="最高学历" width="90"  align="center"/>
    <el-table-column prop="violationCount" label="违纪次数" width="90"  align="center"/>
    <el-table-column prop="violationScore" label="违纪扣分" width="90"  align="center"/>
    <el-table-column prop="updateTime" label="最后操作时间" width="180"  align="center"/>
    <el-table-column label="操作"  align="center">
      <!-- 插槽引入按钮 -->
      <template #default="scope">
        <el-button type="primary" size="small" @click="edit(scope.row.id)">编辑</el-button>
        <el-button type="primary" size="small" @click="violation(scope.row.id)">违纪</el-button>
        <el-button type="danger" size="small" @click="deleteByIds(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页条 -->
  <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 30, 40]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <!-- 新增/修改学员的对话框  empFormRef校验用的 -->
  <el-dialog v-model="dialogVisible" :title="dialogTitle">
      <el-form :model="student" ref="StuFormRef" :rules="rules" label-width="80px">
        <!-- 基本信息 -->
        <!-- 第一行 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="student.name" placeholder="请输入姓名"></el-input>
            </el-form-item>
          </el-col>
          
          <el-col :span="12">
            <el-form-item label="学号" prop="no">
              <el-input v-model="student.no" placeholder="请输入学号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第二行 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="性别" prop="gender">
              <el-select v-model="student.gender" placeholder="请选择性别" style="width: 100%;">
                <el-option v-for="gender in genders" :label="gender.name" :value="gender.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="student.phone" placeholder="请输入手机号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第三行 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="身份证号" >
              <el-input v-model="student.idCard" placeholder="请输入身份证号" style="width: 100%;">
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="是否院校学员" prop="isCollege">
              <el-select v-model="student.isCollege" placeholder="请选择">
                <el-option label="是" value="1" />
                <el-option label="否" value="0" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 使用v-for动态加载下拉列表中的数据，这样便于维护 -->
        <!-- 第四行 -->

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="联系地址" prop="address">
              <el-input v-model="student.address" placeholder="请输入联系地址" style="width: 100%;">
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="最高学历" >
              <el-select v-model="student.degree" placeholder="请选择">
                <el-option v-for="degree in degrees" :label="degree.name" :value="degree.value"></el-option>
              </el-select>
              
            </el-form-item>
          </el-col>
        </el-row>


         <!-- 第五行 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="毕业时间">
              <el-date-picker v-model="student.graduationDate" type="date" style="width: 100%;" placeholder="选择毕业时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD"></el-date-picker>
            </el-form-item>  
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属班级">
              <el-select v-model="student.clazzId" placeholder="请选择" style="width: 100%;">
                <el-option v-for="clazz in clazzs" :label="clazz.name" :value="clazz.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
  
    </el-form>
      <!-- 底部按钮 -->
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="save">保存</el-button>
        </span>
      </template>
  </el-dialog>
</template>

<style scoped>
.search{
  margin: 20px 0;
}
.table{
  margin-bottom: 20px;
}
</style>